<template>
    <EdDialog :width="'700px'" :title="item.title"  v-if="visible" :ref="item.ref" @close-dialog="close" @save-dialog="save">
        <div>
            <el-form :model="editForm"  ref="tenantAddRef" label-position='right' label-width="auto">
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="中介方:" prop="mediator" :rules="$validate.validates({required:true,msg:'不能为空'})" >
                            <template>
                                 <el-radio-group v-model="editForm.mediator" @change="changeRadio">
                                    <el-radio  label='1'>物业</el-radio>
                                    <el-radio  label='2'>非物业</el-radio>
                                 </el-radio-group>
                                
                            </template>
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="承租人:" prop="tenantName" :rules="$validate.validates({required:true,msg:'请输入'})" >
                            <el-input v-model="editForm.tenantName" placeholder="请输入" :disabled="editForm.mediator==2"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="身份证号" prop="idCart" :rules="$validate.validates({required:true,msg:'不能为空',type:'cardNo'})">
                            <el-input class="flex-input" placeholder="请输入" v-model="editForm.idCart" :disabled="editForm.mediator==2"></el-input>
                        </el-form-item>
                        
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="联系电话" prop="tenantPhone" :rules="$validate.validates({required:true,msg:'不能为空'})">
                            <el-input class="flex-input" placeholder="请输入联系电话" v-model="editForm.tenantPhone" :disabled="editForm.mediator==2"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="交易凭证:" prop="voucherPics" >
                            <el-upload
                                    accept=".jpg, .jpeg, .png, .gif"
                                    :action="action"
                                    :headers="headers"
                                    list-type="picture-card"
                                    :limit="5"
                                    :multiple="true"
                                    :file-list="fileList"
                                    :before-upload="beforeImgUpload"
                                    :on-preview="handleImgPreview"
                                    :on-success="handleImgSuccess"
                                    :on-remove="handleImgRemove">
                                    <i class="el-icon-plus"></i>
                                    <div style="font-size: 14px;color: rgba(0, 0, 0, 0.65); margin: 0 0 8px 0;line-height: 1;margin-top: -50px;">上传图片</div>
                                </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                            <p class="labelFont">请上传2M以内的图片，建议上传图片大小430px*430px,至多5张</p>
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="备注" prop="comment">
                            <!-- <el-input-number v-model="editForm.details"></el-input-number> -->
                            <el-input v-model="editForm.details"></el-input>
                            <!-- <EdSelect v-model="editForm.deviceType" :selectParams="deviceTypeParams" style="width:100%" :formatter="setDeviceType"></EdSelect> -->
                        </el-form-item>
                    </el-col>
                </el-row>  
            </el-form>
        </div>
    </EdDialog>
</template>

<script>
    import EdDialog from 'src/components/EdDialog.vue';
    // import { getrRepairerData } from "./api.js";
    import {getToken} from 'src/utils/auth'
    export default{
        name: 'HouseRentDialog', 
        components: { EdDialog},
        props: {
            isShow: {
                type:Boolean,
                required: true,
                default: false,
            },
            item: {
                type:Object,
                required: false,
                default: ()=>{
                    return {
                        title: '',
                        identification: 'changeDialog',
                        ref: 'changeDialog',
                    }
                }
            },
            title_text: {
                type: String,
                required: false,
                default: ()=>{
                    return ''
                }
            },
            changeParams: {
                type: Object,
                default:function () {
                    return null;
                }
            }
        },
        watch:{
            // changeParams(val){
            //     getrRepairerData(val).then((res) =>{
            //         this.data = res.data;
            //     })
            // }
        },
        computed:{
            visible(){
                return this.isShow
            },
        },
        activated(){
            this.action = this.$baseApi + "/file/upload";

        },
        data(){
            return{
                loading:false,
                radio: '',
                data: [],
                editForm:{
                    mediator:'',
                    tenantName:'',
                    tenantPhone:'',
                    idCart:'',
                    voucherPics:[],
                    comment:''
                },
                fileList: [],
                action: '',
                headers:{
                    RdAuthorization: getToken()
                },
                dialogImageUrl: '',
                dialogVisible: false,
            }
        },
        methods: {
            reset(){
                this.loading = false;
                this.radio = '';
                this.data = [];
                this.editForm  = {
                    
                }
            },
            close(){
                this.$emit("close-dialog");
                this.reset();
            },
            cancelStatus(){
                this.$refs.changeDialog.hideLoading()
            },
            save(){
                // this.loading = true;
                let obj = this.data.find((v, i) => {
                    return v.id == this.radio
                })
                this.$emit("save-dialog", this.editForm);
                this.reset();
            },
                // 图片 上传前
            beforeImgUpload(file){
                // console.log('before-->', file)
                const fileType = file.name.split('.');
                const fileDate = fileType.slice(-1);
                if (['jpeg', 'jpg', 'png', 'gif'].indexOf(fileDate[0]) < 0) {
                    this.$message.error('仅支持格式：.jpeg、.jpg、.png、.gif!');
                    return false
                }
                // if (this.fileList.length > 5) {
                //     this.$message.error('最多上传三张图片！')
                //     return false;
                // }
                const isLt5M = file.size / 1024 /1024 < 2;
                if (!isLt5M) {
                    return this.$message.error('上传文件大小不能超过 2MB!');
                }
                // return isLt5M;
                return true;
            },
            // 图片 上传成功
            handleImgSuccess(response, file, fileList){
                let res = file.response;
                if(res&&res.success == true){
                    console.log('res',res);
                    this.editForm.voucherPics.push(res['data'])
                }
            },
            // 图片 删除
            handleImgRemove(file, fileList) {
                this.editForm.voucherPics = fileList&&fileList.map(v=>{
                    return v['url']
                })
            },
            // 图片 预览
            handleImgPreview(file) {
                console.log('file',file);
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            changeRadio(val){
                // console.log('log',log);
            }
        }
    }
</script>

<style  scoped lang="scss">
    :deep .change_box{
        width: 100%;
        border: 1px solid #E4E7ED;
        .box_title{
            width: 100%;
            height: 64px;
            background: #F4F4F4;
            border: 1px solid #E4E7ED;
            padding: 21px 0 21px 12px;
        }
        .box_list{
            height: 360px;
            overflow-y: scroll;
            &::-webkit-scrollbar-thumb{
                background-color: #C1C1C1;
                border-radius: 2px;
            }
            .box_item{
                padding: 15px 30px 10px 10px;
                font-family: 'Noto Sans SC';
                font-style: normal;
                font-weight: 400;
                line-height: 22px;
                .name{
                    font-size: 14px;
                    color: #606266;
                }
                .phone{
                    font-size: 14px;
                    color: #909399;
                }
                .village{
                    // margin-left: 24px;
                    margin-top: 10px;
                    font-size: 14px;
                    color: #909399;
                }
            }
            .box_item.selected{
                background-color: #FEF9F0;           
            }
            .el-radio__input.is-checked + .el-radio__label{
                // background-color: #FEF9F0;           
            }
            .el-radio__input.is-checked .el-radio__inner{
                border-color: #EED096;
                background-color: #EED096;
            }
        }
        .no_data{
            height: 360px;
            color: #909399;
            font-size: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>